import React from 'react'
import { inject, observer } from 'mobx-react'
import { message, Switch, Upload } from 'antd'
import SetButton from '../SetBtton'


const HOCSetMenu = (ElementComponent) => {
    @inject('setStoreInfo')
    @observer
    class Come extends React.Component {
        state = {
            data: [],
            columns: [
                {
                    title: 'ID',
                    dataIndex: 'menuId',
                    align: 'center'
                },
                {
                    title: '名称',
                    dataIndex: 'menuName',
                    align: 'center'
                },
                {
                    title: '图标',
                    dataIndex: 'menuIcons',
                    align: 'center',
                    render: (menuIcons) => <img src={"http://172.16.10.58:8764"+menuIcons} alt='icon' />
                },
                {
                    title: '链接',
                    dataIndex: 'menuLink',
                    align: 'center'
                },
                {
                    title: '排序',
                    dataIndex: 'menuSort',
                    align: 'center'
                },
                {
                    title: '启用',
                    dataIndex: 'menuEnalbStatu',
                    align: 'center',
                    render: (text, record, index) => <Switch defaultChecked={record?.menuEnalbStatu} onChange={(checked) => this.modifyButton(checked, text, record, index)} />
                },
                {
                    title: '操作',
                    align: 'center',
                    render: (text, record, index) => <SetButton onClick={() => this.handleModify(text, record, index)} txt='修改' />
                },
            ],
            isModalVisible: false, //模态框状态
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 5,
                hideOnSinglePage: true
            }, //是否显示分页标志
            iconImg: [], //编辑&添加暂存图片
            modelTitle: null,
        }
        componentDidMount() {
            this.initGet()
        }
        initGet = () => {
            let { getMenuInfo } = this.props.setStoreInfo
            getMenuInfo().then(data => {
                if (data.data.code === 200) {
                    let allData = data.data.data.map(item => {
                        item.key = item.menuId
                        return item
                    })
                    let obj = this.state
                    obj.data = allData
                    this.setState(obj)
                } else {
                    message.error('查询数据失败')
                }
            })
        }
        handleModify = async (text, record, index) => {
            let obj = this.state
            obj.isModalVisible = true
            let icon = {
                thumbUrl: record.menuIcons
            }
            obj.iconImg = []
            obj.iconImg.push(icon)
            obj.modelTitle = '修改菜单'
            await this.setState(obj)
            this.setForm(record)
        }
        handleOk = async () => {
            let { formOne } = this.refs.form.refs
            let { modifyMenuInfo, addMenuInfo } = this.props.setStoreInfo
            if (this.state.modelTitle === '修改菜单') {
                let key = [
                    "menuName",
                    "menuLink",
                    "menuSort",
                    'menuId'
                ]
                let formData = formOne.getFieldsValue(key)
                let menuIcons = this.state.iconImg[0]
                if (menuIcons.name) {
                    menuIcons = await this.upLoadImg(menuIcons)
                } else {
                    menuIcons = menuIcons.thumbUrl
                }
                formData.menuIcons = menuIcons
                modifyMenuInfo(formData).then(data => {
                    if (data.data.code === 200) {
                        message.success('修改数据成功')
                        this.handleCancel()
                        this.initGet()
                    } else {
                        message.error('修改失败')
                    }
                })
            } else {
                let key = [
                    "menuName",
                    "menuLink",
                    "menuSort",
                ]
                let formData = formOne.getFieldsValue(key)
                let menuIcons = this.state.iconImg[0]
                menuIcons = await this.upLoadImg(menuIcons)
                formData.menuIcons = menuIcons
                addMenuInfo(formData).then(async data => {
                    if (data.data.code === 200) {
                        message.success('添加成功')
                        let obj = this.state
                        obj.isModalVisible = false
                        await this.setState(obj)
                        this.initGet()
                    } else {
                        message.error('添加失败')
                    }
                })
            }

        }
        handleCancel = () => {
            let obj = this.state
            obj.isModalVisible = false
            this.setState(obj)
        }
        setForm = (obj) => {
            let { formOne } = this.refs.form.refs
            formOne.setFieldsValue(obj)
        }
        beforeUploadImg = (file, attr) => {
            const isJPG = file.type === "image/jpeg";
            const isJPEG = file.type === "image/jpeg";
            const isPNG = file.type === "image/png";
            const size = file.size / 1024 / 1024;
            if (!(isJPG || isJPEG || isPNG)) {
                message.error("错误，图片格式应为jpg/jpge/png");
                return false;
            } else if (size >= 2) {
                message.warning("图片应<=2M");
                return false;
            } else {
                //验证成功后
                //制作图片缩略图
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = (e) => {
                    file.thumbUrl = e.target.result;
                    let obj = this.state;
                    obj[attr] = [];
                    obj[attr].push(file);
                    this.setState(obj);
                };
            }
            return false;
        };
        handleRemove = (file, attr) => {
            let obj = this.state;
            obj[attr] = [];
            this.setState(obj);
        };
        modifyButton = (checked, text, record, index) => {
            let { isUseMenu } = this.props.setStoreInfo
            let menuEnalbStatu = checked
            menuEnalbStatu === true ? menuEnalbStatu = 0 : menuEnalbStatu = 1 //取反
            let obj = {
                menuId: record.menuId,
                menuEnalbStatu
            }
            isUseMenu(obj).then(data => {
                if (data.data.code === 200) {
                    message.success('修改成功')
                    this.initGet()
                } else {
                    message.error('修改失败')
                }
            })
        }
        upLoadImg = async (data) => {
            let { getPhotos } = this.props.setStoreInfo;
            let formData = new FormData();
            formData.append("file", data);
            let url = await getPhotos(formData).then((data) => {
                if (data.data.code === 200) {
                    return data.data.data[0];
                } else {
                    message.error("上传图片错误");
                }
            });
            return url;
        };
        addMenu = async () => {
            let obj = this.state
            obj.modelTitle = '添加菜单';
            obj.isModalVisible = true
            obj.iconImg = []
            await this.setState(obj)
            let nullForm = {
                menuName: '',
                menuLink: '',
                menuIcons: '',
                menuSort: ''
            }
            this.setForm(nullForm)
        }
        render() {
            let methods = {
                handleOk: this.handleOk,
                handleCancel: this.handleCancel,
                beforeUploadImg: this.beforeUploadImg,
                handleRemove: this.handleRemove,
                addMenu: this.addMenu,
            }
            return (
                <div>
                    <ElementComponent ref='form' {...this.state} {...methods}></ElementComponent>
                </div>
            );
        }
    }

    return Come
}

export default HOCSetMenu